<template>
  <div style="width: 100%;height: 100vh;color:var(--color-neutral-10);margin: 0 auto">
    <div style="padding: 40px 0 0 0;margin: 0 auto;max-width: 1550px;width: 90%;">
      <p style="font-size: 24px;font-weight: bold;margin-bottom: 20px">志愿表管理</p>
    </div>
    <div style="width: 100%;height: calc(100% - 96px);position: relative;overflow-y: auto;">
      <div style="width: 90%;height: 100%;margin: 0 auto;max-width: 1550px;">
        <div style="margin-bottom: 20px;width: 100%;position: relative">
          <a-modal :ok-loading="data.detailForm.isAdding" :closable="false" :mask-closable="!data.detailForm.isAdding" v-model:visible="data.detailForm.show" @cancel="()=>{

          }"
          @ok="detailFormClickOk"
          >
            <template #title>
              {{ data.detailForm.title }}
            </template>
            <div style="max-height: calc(100vh - 48px - 65px - 80px);overflow-y: auto;padding-top: 20px">
              <v-btn v-if="data.detailForm.title=='编辑志愿'" @click="deleteSingle" :disabled="data.detailForm.isAdding" variant="text" style="color: white;background-color: red;margin-bottom: 20px">删除</v-btn>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.universityName" variant="outlined" label="学校名称"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.universityCode" variant="outlined" label="学校代码"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.majorName" variant="outlined" label="专业名称"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.majorRemarks" variant="outlined" label="专业标记"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.majorCode" variant="outlined" label="专业代码"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.batch" variant="outlined" label="批次"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.claim" variant="outlined" label="限制"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.province" variant="outlined" label="省份"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.score1" variant="outlined" label="前1年分数线"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.num1" variant="outlined" label="前1年录取人数"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.ranks1" variant="outlined" label="前1年最低位次"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.score2" variant="outlined" label="前2年分数线"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.num2" variant="outlined" label="前2年录取人数"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.ranks2" variant="outlined" label="前2年最低位次"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.score3" variant="outlined" label="前3年分数线"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.num3" variant="outlined" label="前3年录取人数"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.ranks3" variant="outlined" label="前3年最低位次"></v-text-field>
              <v-text-field :disabled="data.detailForm.isAdding" v-model="data.detailForm.item.money" variant="outlined" label="学费"></v-text-field>
            </div>
          </a-modal>
          <a-trigger trigger="click" :unmount-on-close="false">
            <v-btn :loading="data.loading" style="margin-right: 10px" variant="text"

            >搜索</v-btn>
            <template #content>
              <div style="padding: 20px 20px;border-radius: 10px;background-color: var(--color-neutral-1);box-shadow: 0 4px 10px rgba(0,0,0,0.1);max-width: 300px">
                <v-btn :disabled="data.loading" variant="text" style="margin-bottom: 5px;color: var(--color-neutral-10)" @click="showAllClick">显示全部</v-btn>
                <v-divider></v-divider>
                <a-input :disabled="data.loading" v-model="data.searchForm.universityName" placeholder="院校名称" style="width: 200px;margin-bottom: 5px;margin-top: 10px"></a-input>
                <a-input :disabled="data.loading" v-model="data.searchForm.majorName" placeholder="专业名称" style="width: 200px;margin-bottom: 5px"></a-input>
                <a-input :disabled="data.loading" v-model="data.searchForm.province" placeholder="省份" style="width: 200px;margin-bottom: 5px"></a-input>
                <v-btn style="color: var(--color-neutral-10)" :disabled="data.loading" variant="text" @click="data.tableConfig.page = 1;getTable()">搜索/刷新</v-btn>
              </div>
            </template>
          </a-trigger>
          <a-trigger trigger="click" :unmount-on-close="false">
            <v-btn :disabled="data.loading" style="margin-right: 10px" variant="text"

            >导入</v-btn>
            <template #content>
              <div style="padding: 20px 20px;border-radius: 10px;background-color: var(--color-neutral-1);box-shadow: 0 4px 10px rgba(0,0,0,0.1);max-width: 300px">
                <p style="color: var(--color-neutral-10)">选择的表格文件的第一张工作表应包含导入数据，并且工作表从A1单元格到Q1单元格的内容应依次为：学校名称、学校代码、专业名称、专业标签、专业代码、前1年分数线、前1年录取人数、前1年最低位次、前2年分数线、前2年录取人数、前2年最低位次、前3年分数线、前3年录取人数、前3年最低位次、限制、批次、省份。</p>
                <a-upload @success="uploaded" style="margin-top: 10px" :disabled="data.loading" :action="appData.serverURL + '/bg/volunteer/import'"></a-upload>
              </div>
            </template>
          </a-trigger>
          <a-trigger trigger="click" :unmount-on-close="false">
            <v-btn :disabled="data.loading" style="margin-right: 10px" variant="text"

            >清空</v-btn>
            <template #content>
              <div style="padding: 20px 20px;border-radius: 10px;background-color: var(--color-neutral-1);box-shadow: 0 4px 10px rgba(0,0,0,0.1);max-width: 300px">
                <p style="color: var(--color-neutral-10)">此操作不可恢复</p>
                <v-btn :disabled="data.loading" variant="text" style="background-color: red;color: white" @click="deleteAll">清空</v-btn>
              </div>
            </template>
          </a-trigger>
          <v-btn :disabled="data.loading" style="margin-right: 10px" variant="text" @click="addVolunteerButtonClick"

          >添加</v-btn>
          <div v-if="getPageTotal(data.tableConfig.total,data.tableConfig.size)!=0" style="float: right">
            <v-btn :disabled="data.loading || data.tableConfig.page == 1" style="margin-right: 0px" variant="text"
              @click="()=>{
                data.tableConfig.page = 1
                getTable()
              }"
            >第一页</v-btn>
            <v-btn :disabled="data.loading || data.tableConfig.page == 1" style="margin-right: 10px" variant="text"
              @click="()=>{
                data.tableConfig.page -=1
                getTable()
              }"
            >上一页</v-btn>
            <a-trigger trigger="click" :unmount-on-close="false">
              <v-btn :disabled="data.loading" style="margin-right: 0px" variant="text"

              >{{ data.tableConfig.page.toString() + '/' + (getPageTotal(data.tableConfig.total,data.tableConfig.size)).toString() }}</v-btn>
              <template #content>
                <div style="padding: 20px 20px;border-radius: 10px;background-color: var(--color-neutral-1);box-shadow: 0 4px 10px rgba(0,0,0,0.1)">
                  <a-input v-model="data.tableConfig.pageNumInput" placeholder="页码" style="width: 70px;"></a-input><a-button :loading="data.loading" @click="tableChangePage" :disabled="data.tableConfig.pageNumInput==''" style="margin-left: 5px">转到</a-button>
                  <br>
                  <p v-if="data.tableConfig.warningText!=''" style="color: red">{{ data.tableConfig.warningText }}</p>
                </div>
              </template>
            </a-trigger>

            <v-btn :disabled="data.loading || data.tableConfig.page == getPageTotal(data.tableConfig.total,data.tableConfig.size)" style="margin-right: 0px" variant="text"
                   @click="()=>{
                data.tableConfig.page +=1
                getTable()
              }"
            >下一页</v-btn>
            <v-btn :disabled="data.loading || data.tableConfig.page == getPageTotal(data.tableConfig.total,data.tableConfig.size)" style="margin-right: 0px" variant="text"
                   @click="()=>{
                data.tableConfig.page = getPageTotal(data.tableConfig.total,data.tableConfig.size)
                getTable()
              }"
            >最后一页</v-btn>
          </div>
        </div>
        <a-table @row-click="tableItemClick" :pagination="false" style="width: 100%;margin-bottom: 40px;" :columns="[
            {
              dataIndex:'mark',
              title:'标记'
            },
            {
              dataIndex:'universityName',
              title:'学校名称'
            },
            {
              dataIndex:'universityCode',
              title:'学校代码'
            },
            {
              dataIndex:'majorName',
              title:'专业名称'
            },
            {
              dataIndex:'majorRemarks',
              title:'专业标记'
            },
            {
              dataIndex:'majorCode',
              title:'专业代码'
            },
            {
              dataIndex:'batch',
              title:'批次'
            },
            {
              dataIndex:'claim',
              title:'限制'
            },
            {
              dataIndex:'universityProvince',
              title:'学校省份'
            },
            {
              dataIndex:'province',
              title:'省份'
            },
        ]" :data="data.table" :loading="data.loading" />
      </div>

    </div>
  </div>
</template>

<script>
import tool from '@/utlis/tool'

export default {
  name: '',
  data() {
    return {
      data:{
        table:[],
        loading:false,
        tableConfig:{
          total:0,
          page:1,
          size:10,
          warningText:'',
          pageNumInput:''
        },
        searchForm:{
          universityName:'',
          majorName:'',
          province:''
        },
        detailForm:{
          show:false,
          title:'添加志愿',
          isAdding:false,
          item:{
            mark:'',
            universityName:'',
            universityCode:'',
            majorName:'',
            majorRemarks:'',
            majorCode:'',
            score1:'',
            num1:'',
            ranks1:'',
            score2:'',
            num2:'',
            ranks2:'',
            score3:'',
            num3:'',
            ranks3:'',
            claim:'',
            batch:'',
            province:'',
          },
        }
      }
    }
  },

  methods: {
    async deleteSingle(){
      this.data.detailForm.isAdding = true
      await tool.axiosPost(this.appData.serverURL,'/bg/volunteer/deleteSingle',{
        token:this.bgData.loginedAdminInfo.token,
        mark:this.data.detailForm.item.mark
      })
      this.data.detailForm.show = false
      this.data.detailForm.isAdding = false
      this.getTable()
    },
    getPageTotal(total,size){
      let re = parseInt(total/size)
      if(total%size!=0){
        re+=1
      }
      return re
    },
    async detailFormClickOk(){
      this.data.detailForm.isAdding = true
      let changeToIntKeys = ['num1','score1','ranks1','num2','score2','ranks2','num3','score3','ranks3']
      for(let i=0;i<changeToIntKeys.length;i++){
        if(this.data.detailForm.item[changeToIntKeys[i]]!='0' && (parseInt(this.data.detailForm.item[changeToIntKeys[i]])==NaN || this.data.detailForm.item[changeToIntKeys[i]]=='')){
          this.data.detailForm.isAdding = false
          this.$message.error({
            content:this.data.detailForm.title.slice(0,2) + '失败。分数线、最低位次和录取人数应为数字，若没有数据，请输入0'
          })
          this.data.detailForm.show = true
          return
        }
        this.data.detailForm.item[changeToIntKeys[i]] = parseInt(this.data.detailForm.item[changeToIntKeys[i]])
      }
      if(this.data.detailForm.item.money!='不限'){
        try {
            let re = JSON.parse(this.data.detailForm.item.money)
          if(re<0){
            throw new Error()
          }
        }catch (e){
          this.$message.error({
            content:this.data.detailForm.title.slice(0,2) + '失败。学费应为不限或非负数。'
          })
          this.data.detailForm.show = true
          this.data.detailForm.isAdding = false
          return
        }
      }
      let re = await tool.axiosPost(this.appData.serverURL,'/bg/volunteer/addOrEdit',{
        token:this.bgData.loginedAdminInfo.token,
        data:this.data.detailForm.item
      })
      if(re.status==-2){
        tool.axiosPostUnauthorized()
        return
      }
      this.getTable()
      this.data.detailForm.isAdding = false
    },
    addVolunteerButtonClick(){
      for(let i=0;i<Object.keys(this.data.detailForm.item).length;i++){
        this.data.detailForm.item[Object.keys(this.data.detailForm.item)[i]] = ''
      }
      this.data.detailForm.title = '添加志愿'
      this.data.detailForm.show = true
    },
    tableItemClick(e){
      this.data.detailForm.item = JSON.parse(JSON.stringify(e))
      this.data.detailForm.title = '编辑志愿'
      this.data.detailForm.show = true
    },
    async deleteAll(){
      this.data.tableConfig.page = 1
      this.data.loading = true
      await tool.axiosPost(this.appData.serverURL,'/bg/volunteer/deleteAll',{
        token:this.bgData.loginedAdminInfo.token
      })
      this.data.loading = false
      this.showAllClick()
    },
    showAllClick(){
      this.data.searchForm.universityName = ''
      this.data.searchForm.majorName = ''
      this.data.searchForm.province = ''
      this.getTable()
    },
    uploaded(e){
      console.log(e)
      this.getTable()
    },
    tableChangePage(){
      this.data.tableConfig.warningText = ''
      if(parseInt(this.data.tableConfig.pageNumInput)<1 || parseInt(this.data.tableConfig.pageNumInput)>parseInt(this.data.tableConfig.total/this.data.tableConfig.size + 0.5)){
        this.data.tableConfig.warningText = '页码应为正数且不大于页面总数'
        return
      }
      this.data.tableConfig.page = parseInt(this.data.tableConfig.pageNumInput)
      this.getTable()
    },
    async getTable(){
      this.data.table = []
      this.data.loading = true
      let re = await tool.axiosPost(this.appData.serverURL,'/bg/volunteer/list',{
        token:this.bgData.loginedAdminInfo.token,
        page:this.data.tableConfig.page,
        size:this.data.tableConfig.size,
        searchForm:this.data.searchForm
      })
      if(re.status==-2){
        tool.axiosPostUnauthorized()
        return
      }
      this.data.table = re.results.items
      this.data.tableConfig.total = re.results.total
      // if(this.data.tableConfig.page>this.getPageTotal(this.data.tableConfig.total,this.data.tableConfig.size)){
      //   this.data.tableConfig.page = this.getPageTotal(this.data.tableConfig.total,this.data.tableConfig.size)
      //   this.getTable()
      // }
      this.data.loading = false
    }
  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    this.getTable()
  },

  props: {
    appData:undefined,
    bgData:undefined
  },

  //监听属性 类似于data概念",
  computed: {},

  //监控data中的数据变化",
  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
  },

  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },

  // 生命周期 - 销毁之前调用
  beforeDestroy() {
  },

  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },

  //生命周期 - 销毁完成"
  destroyed() {
  },

  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  }
}
</script>

<style scoped>

.right-back-button:hover{
  background-color: var(--color-neutral-3);
}

</style>